<template>
	<div class="give-cash-bonus">
		<HeaderTop :title="`额度存款`"></HeaderTop>
        <div class="lowerLevel-content-title-left flex-c">
            <div class="lowerLevel-content-title-list flex-c" :class="chosingTitle===1?'title-chosing':''" @click="switchTitle(1)">可用额度</div>
            <div class="lowerLevel-content-title-list flex-c" :class="chosingTitle===2?'title-chosing':''" @click="switchTitle(2)">存款记录</div>
        </div>
        <div class="gray-line"></div>
        <div class="give-cash-content" v-if="chosingTitle===1">
            <div class="give-cash-line flex-b">
                <div class="line-left-fonts flex-s">可用额度:</div>
                <div class="virtual-type-box flex-s">{{ agentData.quotaCash }} 元
                </div>
            </div>
            <div class="give-cash-line flex-b" style="margin-top: .28rem;">
                <div class="line-left-fonts flex-s">发放礼金:</div>
                <div class="virtual-type-box flex-s">
                    <div class="virtual-type" :class="virtualIndex === 1?'virtual-type-activing':''">USDT(trc20)</div>
                </div>
            </div>
            <div class="give-cash-line flex-b" style="margin-top: .28rem;">
                <div class="line-left-fonts flex-s">存款金额:</div>
                <div class="line-right-input flex-b">
                    <van-field v-model="cashNumber" @input="checkCashInput(cashNumber)" type="number" maxlength="10" class="vant-input-list" placeholder="¥0.00"/>
                    <div class="cash-input-remind">1usdt= {{ agentData.usdtRate?agentData.usdtRate:'...' }}元</div>
                    <div class="cash-input-error" v-if="cashInputError">输入金额无效，请检查额度</div>
                </div>
            </div>
            <van-button class="sub-give-cash" type="info" color="#00459E" block @click="check">提交</van-button>
        </div>
        <div class="give-cash-content" v-if="chosingTitle===2">
            <div class="allReports-title flex-b">
                <div class="allReports-title-search">
                    <div class="flex-s" @click="dateSelect=true">
                        <img src="/static/images/agent-lowerLevel-serch.png" alt="" class="allReports-title-search-icon">
                        <input type="text" :placeholder="chosedDate" class="allReports-title-search-input" readonly >
                    </div>
                    <div class="allReports-title-search-btn" @click="customSearch()">查询</div>
                </div>
                <van-button class="search-btn" type="info" color="#00479d" @click="showTypePop = true">{{typeMode}}</van-button>
            </div>
            <div class="data-list-box">
                <div class="collapse-content-list" v-for="(item,index) in listData" @click="switchTitleShow(index)">
                    <div class="collapse-content-list-title">
                        <div class="collapse-content-list-title-left">{{ item.addTimeShow }}</div>
                        <!-- <div class="collapse-content-list-title-left">{{  }}</div> -->
                        <div class="">
                            <img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
                                    class="collapse-content-list-title-right">
                            <img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
                                    class="collapse-content-list-title-right collapse-content-list-title-right2">
                        </div>
                    </div>
                    <div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
                        <div class="">
                            <div class="collapse-content-list-table-list">
                                <div class="w50">
                                    <div class="line1">存款单号</div>
                                    <div class="line2">{{ item.orderId }}</div>
                                </div>
                                <div class="gray-line"></div>
                                <div class="w50">
                                    <div class="line1">存款地址</div>
                                    <div class="line2 ellipsis-s">{{ item.cardNumber }}</div>
                                </div>
                            </div>
                            <div class="collapse-content-list-table-list">
                                <div class="">
                                    <div class="line1">存款类型</div>
                                    <div class="line2">{{ !!item.actionTypeName===true?item.actionTypeName:'未知' }}</div>
                                </div>
                                <div class="gray-line"></div>
                                <div class="">
                                    <div class="line1">存款金额</div>
                                    <div class="line2">{{ item.cash }}</div>
                                </div>
                                <div class="gray-line"></div>
                                <div class="">
                                    <div class="line1">状态</div>
                                    <div class="line2">{{ item.statusName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-data-box" v-if="noData">
                    <img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
                    <div class="no-data-fonts">暂无数据</div>
                </div>
                <div class="load-more" v-if="hasMore && listData.length > 0" @click="loadMore()">
                    <span>点击加载更多</span>
                    <img src="/static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
                </div>
                <div class="load-more" v-if="!hasMore && listData.length > 0">
                    <span>已加载全部</span>
                </div>
            </div>
        </div>
        <van-popup v-model="showQrCode" class="qr-code-pop" :close-on-click-overlay="false">
            <div class="qr-code-list flex-s">
                *您需要存入&nbsp;<span class="qr-code-red bold" id="virtualNumVal">{{ virtualNum }}</span>&nbsp;USDT&nbsp;
                <van-button type="primary" color="#0B3F8E" size="mini" @click="copyFn(virtualNum)">复制</van-button>
            </div>
            <div class="qr-code-list">
                *请选择 <span class="qr-code-red bold">TRC20</span> 协议
            </div>
            <div class="qr-code-list">
                *请核实到账金额与订单一致，避免无法及时到账
            </div>
            <div id="qrCodeBox" class="flex-c" ref="qrCodeBox"></div>
            <div class="address-box flex-b">
                <div class="address-left">地址:</div>
                <div class="address-right flex-b">
                    <div class="address-show">{{ virtualAdd }}</div>
                    <van-button type="primary" color="#0B3F8E" size="small" @click="copyFn(virtualAdd)">复制</van-button>
                </div>
            </div>
            <div class="time-box flex-c">
                剩余时间：{{ hours }}:{{ minutes }}:{{ seconds }}
            </div>
            <van-button class="close-btn" type="primary" color="#0B3F8E" size="small" @click="closePopFn()">关闭窗口</van-button>
        </van-popup>
        <van-popup v-model="showTypePop" position="bottom">
            <van-picker title="请选择类型" show-toolbar :columns="typeList" @confirm="typeChose" @cancel="showTypePop = false"/>
        </van-popup>
        <van-calendar v-model="dateSelect" :min-date="new Date(dateRange.getFullYear(),dateRange.getMonth()-1,1)" :max-date="new Date(dateRange.getFullYear(),dateRange.getMonth(),dateRange.getDate())" type="range" @confirm="onConfirmDate" color="#00459E" title="请选择日期范围"/>
        <!--loading-new-->
    <PayPwdInput :visible="isVisible" @error="isShowError" @close="isVisible = false" @complete="handleComplete"/>

    <div class="loading-new flex-c" v-if="showLoading">
            <img src="/static/images/allLoading.gif" alt="" />
        </div>
        <input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;" readonly/>
	</div>
</template>
<script>
import HeaderTop from '../../components/top/top'
import QRCode from 'qrcodejs2'
import dayjs from 'dayjs'
import {checkPayPassword} from "../../common/check";
import PayPwdInput from "../../components/passwordInput/PayPwdInput.vue";
export default {
	name: 'limitDeposit',
	components: {
    PayPwdInput,
		HeaderTop,
	},
	data() {
		return {
      isShowError: false,
      isVisible: false,
            chosingTitle:1,
            virtualIndex:1,
            cashNumber:'',
            cashInputError:false,
            showQrCode:false,
            qrcode: null,
            agentData:{},
            hours:'00',
            minutes:'00',
            seconds:'00',
            timer:null,
            virtualNum:'...',
            virtualAdd:'...',
            showLoading:false,
            statusVal:'',
            pageNumber:1,
            chosedDate:'请选择日期范围',
            typeMode:'全部',
            showTypePop:false,
            typeList:['全部','完成','已关闭','确认通过','待确认','待审核','审核拒绝','确认拒绝'],
            dateType:['','9','4','2','1','0','-1','-2'],
            listData:[],
            dateSelect:false,
            dateRange:new Date(),
            beginTime:'',
			endTime:'',
            noData:false,
            showDataSwitch: [],
            hasMore:true,

		}
	},
	mounted() {
    checkPayPassword(this.$router)
        this.getAgentInfo()
	},
	beforeRouteLeave(to, from, next) {
        clearInterval(this.timer);
        this.timer = null;
		this.$destroy(true)
		next()
	},
	methods: {
    handleComplete(code){
      this.isLoading = true
      this.ServerAPI.postAPI(this.API.validatePayPassword, {
        password:code
      }, (success, data) => {
        if(success) {
          if (data.code !== '1') {
            this.isLoading = false
            this.isShowError = true
            this.$toastTop(data.info, 3);
            return
          }
          this.isVisible = false
         this.subDeposit()
        }
      })
    },
		loadTop() {
            this.getAgentInfo()
		},
        switchTitle(val){
            if(this.chosingTitle !== val) {
                this.chosingTitle = val
                if(this.chosingTitle === 2) {
                    this.getDepositList()
                }
                this.noData = true
                this.noData = false
                this.pageNumber = 1
                this.listData = []
                this.showDataSwitch = []
                this.chosedDate = '请选择日期范围'
                this.statusVal = ''
                this.beginTime = ''
                this.endTime = ''
                this.typeMode = '全部'
            }
        },
        getAgentInfo(){
            this.ServerAPI.postAPI(this.API.getAgentInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						this.agentData = data.data
                        this.agentData.quotaCash = this.agentData.quotaCash.toFixed(2)
					}
				}
			})
        },
        getDepositList(){
            this.showLoading = true
            let params = {
                status:this.statusVal,
                startDate:this.beginTime !== ''?this.beginTime + ' 00:00:00':'',
                endDate:this.endTime !== ''?this.endTime + ' 23:59:59':'',
                pageNumber:this.pageNumber,
                pageSize:10
            }
            this.ServerAPI.postAPI(this.API.agentDepositList,params, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '0000'){
                        if(data.data.length === 10){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 10){
							this.hasMore = false
							this.noData = false
						}
						this.listData = this.listData.concat(data.data)
                        // this.listData = data.data
                        if(this.listData.length === 0){
							this.noData = true
						}
                        this.listData.forEach((item, index) => {
                            item.addTimeShow = dayjs(item.addTime).format('YYYY-MM-DD hh:mm:ss')
                            this.showDataSwitch[index] = 1
                            if(item.status === 9) {
                                item.statusName = '完成'
                            }else if(item.status === 4) {
                                item.statusName = '已关闭'
                            }else if(item.status === 2) {
                                item.statusName = '确认通过'
                            }else if(item.status === 1) {
                                item.statusName = '待确认'
                            }else if(item.status === 0) {
                                item.statusName = '待审核'
                            }else if(item.status === -1) {
                                item.statusName = '审核拒绝'
                            }else if(item.status === -2) {
                                item.statusName = '确认拒绝'
                            }
                            if(item.actionType === 10000) {
                                item.actionTypeName = 'usdt转账'
                            }else if(item.actionType === 10001) {
                                item.actionTypeName = '代理转账'
                            }else if(item.actionType === 10002) {
                                item.actionTypeName = '红利退回'
                            }else if(item.actionType === 10003) {
                                item.actionTypeName = '佣金发放'
                            }else if(item.actionType === 10004) {
                                item.actionTypeName = '代理预支'
                            }else if(item.actionType === 10005) {
                                item.actionTypeName = '手工USDT补单'
                            }
                        })
					}
				}
			})
        },
        checkMember(){
            this.ServerAPI.postAPI(this.API.checkMember, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){

					}
				}
			})
        },
        checkCashInput(val){
            this.cashNumber = this.cashNumber.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
            if(this.cashNumber > 9000){
                this.cashInputError = true
            }else{
                this.cashInputError = false
            }
        },
    check(){
      if(this.isEmpty(this.cashNumber) === true){
        this.$toastTop('请输入存款金额', 3);
        return false
      }
      if(!checkPayPassword(this.$router)) return
      this.isVisible = true
    },
        subDeposit(){

            this.showLoading = true
            let params = {
                actionType:'10000',
                cash:this.cashNumber,
            }
            this.ServerAPI.postAPI(this.API.limitDepositSub, params, (success,data)=>{
                this.showLoading = false
				if(success){
					if(data.code === '0000'){
						this.virtualNum = data.data.virtualNum
						this.virtualAdd = data.data.usdtWallet
                        this.handleCount(data.data.expireTime)
                        this.showQrCode = true
                        this.$nextTick(()=>{
                            this.initQrCode(this.virtualAdd)
                        })
					}else{
                        this.$toastTop(data.info, 3);
                    }
				}else{
                    this.$toastTop('网络慢，请稍后再试', 2);
                }
			})
        },
        initQrCode(virtualVal) {
            document.getElementById('qrCodeBox').innerHTML = ''
            this.qrcode = new QRCode(this.$refs.qrCodeBox, {
                text: virtualVal,
                width: 150,
                height: 150
            })
        },
        handleCount(timeData) {
            let remainingTime = timeData
            this.timer = setInterval(()=>{
                // let currentTime = new Date().getTime();
                // let endTime = new Date(timeData * 1000).getTime();
                // let remainingTime = endTime - currentTime;
                if (remainingTime > 0) {
                    // 将剩余时间转换为小时、分钟、秒
                    let days = Math.floor(remainingTime * 1000 / (1000 * 60 * 60 * 24));
                    let hours = Math.floor((remainingTime * 1000 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    let minutes = Math.floor((remainingTime * 1000 % (1000 * 60 * 60)) / (1000 * 60));
                    let seconds = Math.floor((remainingTime * 1000 % (1000 * 60)) / 1000);
                    if(hours < 10){
                        hours = '0' + hours
                    }
                    if(minutes < 10){
                        minutes = '0' + minutes
                    }
                    if(seconds < 10){
                        seconds = '0' + seconds
                    }
                    this.hours = hours
                    this.minutes = minutes
                    this.seconds = seconds
                    remainingTime --
                } else {
                    clearInterval(this.timer);
                    this.timer = null;
                    this.closePopFn()
                }
                console.log('timer')
            },1000)
        },
        typeChose(value, index) {
            this.typeMode = this.typeList[index]
            this.statusVal = this.dateType[index]
            this.pageNumber = 1
            this.listData = []
            this.showTypePop = false
            this.getDepositList()
        },
        // 自定义时间范围查询
		customSearch(){
			if(this.chosedDate === '请选择日期范围'){
                this.$toastTop('请选择日期范围',3)
				return
			}else{
				// this.dateType = ''
				this.pageNumber1 = 1
				this.listData = []
				this.getDepositList()
			}
		},
        formatDate(date) {
			return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
		},
		onConfirmDate(date) {
			const [start, end] = date;
			this.chosedDate = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			this.beginTime = `${this.formatDate(start)}`
			this.endTime = `${this.formatDate(end)}`
			this.dateSelect = false
		},
        switchTitleShow(value) {
			this.showDataSwitch[value] = this.showDataSwitch[value] === 1 ? 0 : 1
			this.$forceUpdate()
		},
        loadMore(){
			this.pageNumber++
			this.getDepositList()
		},
        copyFn(copyVal){
            var clickContent = copyVal
			var inputElement = document.getElementById('copy_content')
			inputElement.value = clickContent
			inputElement.select()
			document.execCommand('Copy')
            this.$toastTop('复制成功',1)
        },
        closePopFn(){
            clearInterval(this.timer);
            this.timer = null;
            this.showQrCode = false
        },


	}
}
</script>
<style lang="scss" scoped>
.give-cash-bonus {
    .lowerLevel-content-title-left {
        width: 4.2rem;
        margin: 0 auto;
        .lowerLevel-content-title-list {
            width: 50%;
            color: rgb(114,114,114);
            height: .78rem;
            border-bottom: rgba(0, 71, 157,0) 2px solid;
        }
        .title-chosing {
            font-weight: bold;
            color: rgb(0, 71, 157);
            border-bottom: rgb(0, 71, 157) 2px solid;
        }
    }
    .gray-line {
        height: 1px;
        background: rgb(160,160,160);
    }
    .give-cash-content {
        .balance-box {
            padding: 0 .2rem;
            margin-top: .24rem;
        }
        .give-cash-line {
            padding: 0 .2rem;
            height: 0.58rem;
            margin-top: .4rem;
            .line-left-fonts {
                width: 1.5rem;
                font-size: .25rem;
            }
            .virtual-type-box {
                width: calc(100% - 1.4rem);
                height: 100%;
                .virtual-type {
                    padding: .1rem .2rem;
                    border: #1D1D1D 1px solid;
                    border-radius: .08rem;
                    font-size: .25rem;
                }
                .virtual-type-activing {
                    padding: .1rem .2rem;
                    border: #3093F7 1px solid;
                    border-radius: .08rem;
                    color: #3093F7;
                }
            }
            .line-right-input {
                width: calc(100% - 1.4rem);
                height: 100%;
                border: #D1D1D1 1px solid;
                border-radius: .08rem;
                padding: 0 .2rem;
                position: relative;
                .vant-input-list {
                    height: 100%;
                    padding: 0;
                    font-size: .24rem;
                    padding-top: .04rem;
                }
                .cash-input-remind  {
                    position: absolute;
                    left: 0;
                    bottom: -.4rem;
                    width: 100%;
                    font-size: .24rem;
                    color: rgb(255,120,0);
                }
                .cash-input-error  {
                    position: absolute;
                    right: .1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: .2rem;
                    color: #C72823;
                }
            }
        }
        .sub-give-cash {
            width: 80%;
            margin: 1rem auto 0;
            border-radius: .15rem;
        }
        .allReports-title {
            padding: 0 .2rem;
            margin-top: .2rem;
            .allReports-title-search {
                position: relative;
                width: 74%;
                display: flex;
                align-items: center;
                background: rgb(238, 238, 238);
                height: .6rem;
                line-height: .8rem;
                border-radius: .08rem;
                .allReports-title-search-icon {
                    height: .4rem;
                    margin: 0 .1rem 0 .2rem;
                }
                .allReports-title-search-input {
                    width: 3.6rem;
                    background: none;
                    border: none;
                    outline: none;
                }
                .allReports-title-search-btn {
                    position: absolute;
                    height: .46rem;
                    line-height: .46rem;
                    top: .06rem;
                    right: .08rem;
                    background: #00479d;
                    color: #FFFFFF;
                    padding: 0 .2rem;
                    border-radius: .08rem;
                }
            }
            .search-btn {
                width: 1.68rem;
                height: .56rem;
                line-height: .6rem;
            }
        }
        .data-list-box {
            margin-top: .2rem;
            padding: 0 .2rem;
            .collapse-content-list {
                margin-top: .1rem;
                .collapse-content-list-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: rgb(229, 229, 229);
                    height: .8rem;
                    padding: 0 .2rem;
                    color: rgb(65, 65, 65);
                    .collapse-content-list-title-right {
                        height: .25rem;
                    }
                    .collapse-content-list-title-right2 {
                        transform: rotate(180deg);
                    }
                    div {
                        display: flex;
                        align-items: center;
                        .right-fonts {
                            margin-right: .15rem;
                        }
                        .collapse-content-list-title-right {
                            height: .25rem;
                        }
                        .collapse-content-list-title-right2 {
                            transform: rotate(180deg);
                        }
                    }

                }
                .collapse-content-list-table {
                    padding: .1rem .2rem .2rem;
                    .collapse-content-list-table-list {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        text-align: center;
                        border-bottom: rgb(229, 229, 229) 1px solid;
                        padding: .15rem 0;
                        div {
                            width: 33.3%;
                            .line1 {
                                width: 100%;
                                color: rgb(102, 102, 102);
                            }
                            .line2 {
                                margin-top: .1rem;
                                width: 100%;
                                color: rgb(52, 52, 52);
                                padding: 0 .1rem;
                            }
                        }
                        .w50 {
                            width: 50%;
                        }
                        .gray-line {
                            height: .5rem;
                            width: 1px;
                            background: rgb(229, 229, 229);
                        }
                    }
                }
            }
            .load-more {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #9C9C9C;
                margin-top: .15rem;
                margin-bottom: .6rem;
                .load-more-icon {
                    height: .15rem;
                    margin-left: .15rem;
                }
            }
            .no-data-box {
                text-align: center;
                margin-top: 1rem;
                .no-data-img {
                    width: 3rem;
                }
                .no-data-fonts{
                    color: rgb(176,182,190);
                    font-size: .4rem;
                    margin-top: .2rem;
                }
            }
        }
    }
    .qr-code-pop {
        border-radius: .14rem;
        padding: .3rem .34rem;
        width: 6.6rem;
        .qr-code-list {
            margin-top: .2rem;
            font-size: .26rem;
            .qr-code-red {
                color: #FF0000;
            }
        }
        #qrCodeBox {
            margin: .26rem auto 0;
        }
        .address-box {
            margin-top: .26rem;
            .address-right {
                width: 5rem;
                .address-show {
                    width: 3.86rem;
                    padding: 0 .24rem;
                    border-radius: .08rem;
                    background: #EEEEEE;
                    height: 0.66rem;
                    line-height: .66rem;
                    border: #999999 1px solid;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .time-box {
            margin-top: .24rem;
        }
        .close-btn {
            display: block;
            margin: .3rem auto 0;
        }
    }
}

</style>
